<template>
  <div class="goods-payDetail-container">
    <div class="header-container">
      <div class="image">
        <image :src="submitInfo.productImage" style="width: 110px; border-radius: 6px" mode="widthFix"></image>
      </div>
      <div class="right">
        <div class="title">
          {{ submitInfo.productTitle }}
        </div>
        <div style="height: 10px"></div>
        <div class="item">
          <div class="title">数量:</div>
          <div class="value">x {{ submitInfo.productCount }}</div>
        </div>
        <div class="item">
          <div class="title">价格:</div>
          <div class="value">
            <nut-price :price="submitInfo.realPrice / 100" size="small" :decimal-digits="2" />
          </div>
        </div>
        <div class="item">
          <div class="title">规格:</div>
          <div class="value">{{ submitInfo.specialName }}</div>
        </div>
      </div>
    </div>
    <div class="goodsOrder-pay-box">
      <div class="item">
        <div class="key">订单号</div>
        <div class="value">{{ submitInfo.orderNumber }}</div>
      </div>
      <div class="item">
        <div class="key">手机号</div>
        <div class="value">{{ Userinfo.userName }}</div>
      </div>
      <div class="item">
        <div class="key">余额</div>
        <div class="value">
          <nut-price :price="Userinfo.balance / 100" size="small" :decimal-digits="2" />
        </div>
      </div>
    </div>
    <div class="footer-pay-btn">
      <div class="price">
        <div class="ipt">实付款:</div>
        <div class="num">
          <nut-price :price="submitInfo.realPrice / 100" size="normal" :decimal-digits="2" />
        </div>
      </div>
      <div class="btn">
        <nut-button type="primary" color="linear-gradient(to right, #5232B7,#7237BC)" @click="payOrder"
          block>立即付款</nut-button>
      </div>
    </div>
  </div>
  <nut-dialog no-cancel-btn title="温馨提示" content="确定要支付当前订单吗" v-model:visible="payFlag">
    <template v-slot:footer>

      <nut-row :gutter="10">
        <nut-col :span="12">
          <div class="flex-content">
            <nut-button type="default" block @click="payFlag = false">取消</nut-button>
          </div>
        </nut-col>
        <nut-col :span="12">
          <!-- :disabled="!formatPhoneInput()" -->
          <div class="flex-content flex-content-light">
            <nut-button type="primary" color="linear-gradient(to right, #5232B7,#7237BC)" block
              @click="onOkPay">确定</nut-button>
          </div>
        </nut-col>
      </nut-row>

    </template>
  </nut-dialog>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useProductStore, useUserStore } from '../../store';
import Taro from '@tarojs/taro';
import * as orderApi from "../../api/order"
import { storeToRefs } from 'pinia';
const productStore = useProductStore();
const userStore = useUserStore();
const payFlag = ref(false)
const isRequesting = ref(false); // 标记是否正在发起请求

const { submitInfo } = storeToRefs(productStore)
const { Userinfo } = storeToRefs(userStore)




onMounted(() => {


})
const onOkPay = async () => {
  if (isRequesting.value) {
    // 如果正在发起请求中，防止重复点击
    return;
  }

  isRequesting.value = true; // 设置为正在发起请求中

  try {
    const result = await orderApi.PayCommerOrder({ orderId: submitInfo?.value.id });
    if (result.state === 202) {
      payFlag.value = false
      Taro.showToast({
        title: result.message,
        icon: "none",
        duration: 3000
      });
    } else if (result.state === 200) {
      payFlag.value = false

      Taro.showToast({
        title: "支付成功",
        icon: "none",
        duration: 3000
      });


    }

  } finally {
    // 无论请求成功或失败，都重置请求状态，允许下一次点击
    setTimeout(() => {
      isRequesting.value = false;
    }, 1000)
  }
}
// const { data, message, state } = await orderApi.PayOrder({ orderNumber: submitInfo.value.orderNumber })

const payOrder = async () => {
  payFlag.value = true


}
</script>
<style lang="scss" scoped>
.goods-payDetail-container {
  padding: 10px 20px;

  .header-container {
    display: flex;
    padding: 15px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background-color: #fff;

    .right {
      flex: 1;
      margin-left: 20px;
      font-size: 24px;

      .title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .item {
        margin-top: 5px;
        display: flex;
        align-items: center;

        .title {
          color: #999;
        }

        .value {
          margin-left: 15px;
          color: #999;
        }
      }
    }
  }

  .goodsOrder-pay-box {
    margin-top: 20px;
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background-color: #fff;
    font-size: 24px;

    .item {
      color: #999;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .key {
        width: 100px;
      }

      .value {
        flex: 1;
      }

      &:nth-child(n + 2) {
        margin-top: 25px;
      }
    }
  }

  .footer-pay-btn {
    padding: 20px;
    position: fixed;
    // width: 100%;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 26px;
    background-color: #fff;

    .price {
      display: flex;
      align-items: center;
      width: 40%;

      .ipt {
        color: #999;
      }

      .num {
        margin-left: 10px;
      }
    }

    .btn {
      width: 60%;
    }
  }
}
</style>
